<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>影视站</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
      }

      .top {
        width: 100%;
        height: 50px;
        background-color: rgb(192, 192, 195, 0.2);

        .zj {
          height: 100%;
          width: 1000px;
          display: flex;
          margin: 0 auto;
          .ipt {
            margin-top: 10px;
            margin-left: 60px;
            display: flex;
            height: 30px;
            a {
              text-decoration: none;
              padding-left: 5px;
              padding-right: 5px;
              padding-top: 2px;
              padding-bottom: 2px;
              color: #fff;
              font-size: 15px;
            }
          }
          .text {
            display: inline-block;
            margin-top: 10px;

            a {
              text-decoration: none;
            }
          }

          .ig {
            height: 100%;
            width: 300px;
            display: inline-block;
            img {
              height: 55px;
              width: 100%;
            }
          }
        }
      }
      .body {
        width: 1000px;
        margin: 0 auto;
        .left {
          width: 80%;
          height: 950px;
          display: inline-block;
          img {
            width: 100%;
          }

          .dy {
            .b1 {
              width: 100%;
              height: 200px;
              display: flex;
              /* .a {
                img{
                  position: relative;
                  right: 20px;
                }
              } */

              div {
                display: inline-block;
                width: 160px;
                height: 200px;
                img {
                  width: 120px;
                  display: flex;
                  margin: 0 auto;
                }
                p {
                  display: block;
                  text-align: center;
                }
              }
            }
          }
        }
        .right {
          position: absolute;
          top: 50px;
          right: 345px;
          width: 201px;
          height: 750px;

          .igt {
            width: 100%;
            img {
              width: 100%;
              height: 150px;
            }
          }
          .t {
            display: inline-block;
            width: 100%;
            height: 100%;
            padding-left: 20px;
            padding-top: 20px;
            table {
              border-color: rgb(235, 233, 233, 0.5);
            }

            .tt {
              margin-left: 15px;
              margin-right: 5px;
              margin-top: 5px;
              margin-bottom: 5px;
            }
            .text {
              width: 100px;
              height: 40px;
              margin-top: -20px;
            }
          }
        }
      }
      .bottom {
        width: 100%;
        height: 100px;
        background-color: rgb(192, 192, 195, 0.2);
        .hr {
          margin: 0 auto;
          padding-top: 10px;
          width: 31%;
          height: 100%;

          a {
            text-decoration: none;
          }
          .end {
            display: block;
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="top">
        <div class="zj">
          <div class="ig">
            <img src="logo.png" />
          </div>
          <div class="text">
            <a href="#">电影网</a>
            <a href="#">资料库</a>
            <a href="#">3D</a>
            <a href="#">IMAX</a>
            <a href="#">爱情</a>
            <a href="#">动作</a>
            <a href="#">喜剧</a>
            <a href="#">惊悚</a>
            <a href="#">扫暴</a>
            <a href="#">电视剧</a>
          </div>
          <div class="ipt">
            <input />
            <a href="#" style="background-color: red">搜索</a>
          </div>
        </div>
      </div>
      <div class="body">
        <div class="left">
          <img src="top.png" />
          <div class="dy">
            <h2>热门电影</h2>
            <div class="b1">
              <div class="a">
                <img src="dy1.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy2.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy3.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy4.png" />
                <p>电影1</p>
              </div>
              <div class="b">
                <img src="dy5.png" />
                <p>电影1</p>
              </div>
            </div>
            <div class="b1">
              <div class="a">
                <img src="dy1.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy2.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy3.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy4.png" />
                <p>电影1</p>
              </div>
              <div class="b">
                <img src="dy5.png" />
                <p>电影1</p>
              </div>
            </div>
            <div class="b1">
              <div class="a">
                <img src="dy1.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy2.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy3.png" />
                <p>电影1</p>
              </div>
              <div>
                <img src="dy4.png" />
                <p>电影1</p>
              </div>
              <div class="b">
                <img src="dy5.png" />
                <p>电影1</p>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="igt">
            <img src="banner2.png" />
          </div>
          <p>明星资料新人榜</p>
          <div class="t">
            <table border="1" style="border-collapse: collapse">
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <img src="dsj1.png" width="40px" height="40px" class="tt" />
                  <div style="display: inline-block" class="text">
                    <h4 style="color: orange">姓名</h4>
                    <h5>资料 新闻 图片</h5>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="hr">
          <a href="#">首页 · </a>
          <a href="#">图库 · </a>
          <a href="#">关于本站 · </a>
          <a href="#">联系我们 · </a>
          <a href="#">咨询 · </a>
          <a href="#">网站地址 · </a>
          <a href="#">法律声明 · </a>
          <a href="#">用户协议</a>
          <br /><br />
          <a style="text-align: center" class="end"
            >copyright&copy;1998-2014版权所有 违者必究</a
          >
        </div>
      </div>
    </div>
  </body>
</html>
